<template>
  <view class="flex_left_right header_container" :style="{ paddingTop: statusBarHeight + 'px' }">
    <view class="flex_left header_left"><slot name="left"></slot></view>
    <view class="flex_right header_title"><slot></slot></view>
    <view class="flex_left header_right"><slot name="right"></slot></view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
defineOptions({ options: { styleIsolation: 'shared' } });
const statusBarHeight = ref(20);
const getPhoneInfo = () => {
  const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
  statusBarHeight.value = phoneInfo.statusBarHeight;
};
onLoad(() => {
  getPhoneInfo();
});
</script>

<style scoped lang="scss">
.header_container {
  border-bottom-width: 0.5px !important;
  border-color: #dadbde !important;
  border-bottom-style: solid;
  background-color: #fff;
  .header_title {
    font-size: 36rpx;
    font-weight: 600;
    text-align: center;
    margin: 20rpx 0;
  }
  .header_left {
    width: auto;
  }
  .header_right {
    width: auto;
  }
}

</style>
